<template>
    <h2>用户借款页面</h2>
    <table class="table table-bordered">
        <tr>
            <td>借款款项名称</td>
            <td>
                {{ data.BM_Name }}
            </td>
        </tr>
        <tr>
            <td>最高金额</td>
            <td>
                {{ data.BM_Money }}
            </td>
        </tr>
        <tr>
            <td>利息值</td>
            <td>
                {{ data.BMI_Interest }}%
            </td>
        </tr>
        <tr>
            <td>借款期限</td>
            <td>
                {{ data.BMI_Year }}年
            </td>
        </tr>
        <tr>
            <td>借款金额</td>
            <td>
                <input type="text" placeholder="请输入借款金额" v-model="BMmoney" />
            </td>
        </tr>
        <tr>
            <td>每月还款金额</td>
            <td>
                {{ ((Number(BMmoney) + (Number(BMmoney) * data.BMI_Interest / 100)) / data.BMI_Year / 12).toFixed(2)
                }}CNY
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button class="btn btn-primary" @click="submitData">确认借款</button>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import { useUserStore } from '../../store/index.ts';


const userStore = useUserStore();

const router = useRouter();
const route = useRoute();

const data = ref({
    BM_Name: '',
    BM_Money: 0,
    BMI_Interest: 0,
    BMI_Year: 0
});
const BMmoney = ref('');
onMounted(() => {
    loadData();
})

//加载数据
const loadData = () => {
    axios.get("https://localhost:44387/api/Borrows/GetBorrowMoneyInfo", {
        params: {
            BMid: route.query.BM_Id
        }
    }).then(res => {
        console.log(res.data);
        data.value = res.data[0];
    })
        .catch(err => {
            console.log(err);
        })
}

//提交数据 保存用户借款信息
const submitData = () => {
    axios.post("https://localhost:44387/api/Borrows/AddUserBorrowMoney", {
        BM_Id: route.query.BM_Id,
        UBM_Money: BMmoney.value,
        U_Id: userStore.UserId

    })
        .then(res => {
            console.log(res.data);
            if (res.data > 0) {
                alert('保存用户借款信息成功')
                router.push('/ShowUserBorrow')
            }
            else {
                alert('保存用户借款信息失败')
            }
        })
        .catch(err => {
            console.log(err);
        })
}


</script>
